<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <input type="text" name="username" id="username"><br>
    <input type="password" name="password" id="password"><br>
    <button type="button" onclick="loginJson()">直接提交json数据</button>
    <button type="button" onclick="loginString()">提交String定义的json数据</button>
</form>
<script th:src="@{/static/js/jquery.js}"></script>
<script>
    function loginJson() {
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            type: "post",
            url: "/loginJson",
            data: JSON.stringify({username: username, password: password}),
            dataType: "json",
            success: function (data) {
                /*dataType：‘json’，这样子后台给必须给json格式的数据，否则不运行success函数!!!*/
                if (data != null) {
                    alert("用户:" + data.username + " 登录成功!");
                    window.location.href = "/tomain";
                }
            },
            error: function () {
                alert("账号密码输入错误!!");
                window.location.reload();
            }

        })
    }

    /*利用string往后台传数据，因为是string类型的，所以后端没有必要用@requestbody来吧数据放进User user形参里
    因为传入的是{“username":xx,"password":xx}，传到后端相当于username=xx&password=xx，看见这种类型的传参，
    所以后端只需要直接写（String username,String password)就可以接收到!!!!!!*/
    function loginString() {
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            type: "post",
            url: "/loginString",
            data: {"username": username, "password": password},
            //string直接写成json数据,后台接收为username=1111&password=111，看见这种参数，后台直接（String username,String password)
            dataType: "text",
            success: function (data) {    //收到的data为text才能进行sucess函数
                if (data == "ok") {
                    alert("登录成功!");
                    window.location.href = "/tomain";
                } else if (data == "err") {
                    alert("登录失败!");
                    location.reload();
                }
            },
            error: function () {
                alert("输入有误");
            }
        })
    }


</script>
</body>
</html>
